Learning Objective 


Understand nodes and children 
Use different methods to select children 
Assign class to elements 


Use different selector methods to get elements 
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What we want to do 


To develop a frequency analysis fool we need To: 


Populate a table Parse the HTML 
with the analysis table and use it as 
result 


the key Fj 


Both of these are going to require some deeper 
understanding of the DOM and how fo manipulate It! 
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Recap: DOM 


DOM: Document Object Model 


</> 
S=I 


Fancy way of saying “the hierarchy of all the 


elements of our HTML document” 
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DOM - Continued 


First, let’s Talk about nodes! 


Node: Data points that are linked together to 


form a structure. Most nodes are arranged into 


We will be talking about 


Node nodes in the DOM! 
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DOM - Continued 


Every node is one ot: 
e Element — like <o></p> 
e Attribute — like hret="" 

e Text — like “bla” 


Nodes can have children 


Children 


HTMLCollection 


Like an Array of elements in document order 


We can use them to traverse the DOM 


Let's investigate: oe} 


document. body. chil 
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Iterating Elements 


same as Arrays! 


for (const element of document. body. « 
console. (element.tagName) 


i 


Reminder: Getting Elements 


document. 
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Shopping List 


<ul id="shopping-list"> 
<li>Pasta</li> 
<1i>Tomatoes</1li> 
<li>Basil</li> 
<li>Olive Oil</li> 
</ul> 


Let listEl = document.getElementById("shopping-list" ) 


Shopping List 


We can print each item of the list: 


Let listEl = document.getElementById("shopping-list" ) 


for (const listItem of listEl.children) { 
console. log(listItem. innerText ) 


} 


Shopping List 
Or save if in an Array for manipulation 


Let listEl = document.getElementById("shopping-list" ) 
Let shoppingList = [] 


for (const listItem of listEl.children) { 


} 


ShoppingList.push(listItem. innerText) 


Hews 


First and Last Children 


listEl.firstElementChild 
J// <lt>Pasta</Llt> 


listEl.lastElementChild 
J// <li>Olive OVL</Ltit> 


lasebl chatdren|)2)| 
// <li>Basitl</Llt> 
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selecting By Tag Name 


Let’s print out all of the image URLs in gd webpage 


Let imageElements = document. getElementsByTagName( "img" ) 


for (const imgElement of imageElements) { 
console. log(imgElement. src) 


Being more specific 
What if we wanted To select specific elements? 


Give them allanID! 7) 


<p "special" >Special</p> 
<p>Not special</p> 
<p "special" >Special</p> 


Solution: Classes 


Like an ID, but multiple elements can share it! 


<p @las5=": ecial">Special</p> 
<p>Not special</p> 


<p €las5= ial" >Special</p> 


Any element can be assigned a class, or 
multiple classes: 


selecting Elements By Class 


Then fo select the soecial elements we would use: 


document. getElementsByClassName("special" ) 


<p class="special">Special</p> 
<p>Not special</p> 
<p class="special">Special</p> 


Chaining Selectors 


<div = contal 
<p "Speci >Hello</p> 
<p>world</p> 


</div> 
<p ="spe "></p> 


How would you select only the special p in the 


containere 


Chaining Selectors 


<div id="container'"> 


<p>world</p> 
</div> 
<p class="special"></p> 


document. getElementById("container" ) 
.getElementsByClassName("special" ) 


We control the DOM 


‘wah 
We KNOW how To select elements by: Sian 
© Their ID a, 
e Their Class 
¢ Their Tag PS 


And how To select their child elements 


Ly 
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Back to Frequency Analysis 


Now, how would you: 


Populate a table with Parse the HTML table 
the analysis result and use If as the key 


SIGITAL WAY OF LIFE 


Summary 


Collection of 
<body> element 
children 


document. body.children 


| Select an element 
using ID 


document. 


Select first or last 
element and select 
using index 


listEl.firstElementChild 
listEl.lastElementChild 
listEl.children| 2] 


Select element using 
tag name 


document. 


" 


Summary 


<p id="special" >Special</p> 


Assign element an 
ID 


Assign element a 


<p class="special">Special</p> 
class 


Select element 


using Class document. getElementsByClassName("special" ) 


Chain selection. document. getElementById("container" ) 
Select using [D and 


Class 


.getElementsByClassName("special" ) 
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Questions? 


$ 
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Your Turn! 


> Play around, have 
fun, ask questions! 


